<template>
  <div class="homepage-hero-module">
    <!-- 底部视频  -->
    <div class="video-container">
      <div :style="fixStyle" class="filter"></div>
      <video
        :style="fixStyle"
        loop
        autoplay
        class="fillWidth"
        v-on:canplay="canplay"
        :muted="muted"
      >
        <source src="../../assets/HomeResource/SkyStar.mp4" type="video/mp4" />
        浏览器不支持 video 标签，建议升级浏览器。
      </video>
      <div class="poster hidden" v-if="!vedioCanPlay">
        <img
          :style="fixStyle"
          src="../../assets/HomeResource/SkyStar.png"
          alt
        />
      </div>
    </div>
    <!-- 文字内容 -->
    <div class="homepage-content">
      <!-- <svg class="first-screen-logo" width="79" height="27" fill="none">
        <path fill-rule="evenodd" clip-rule="evenodd" :d="kk" fill="#fff" />
      </svg> -->
      <p class="first-screen-logo">空间电源实验室</p>
      <img
        class="first-screen-slogan"
        src="../../assets/HomeResource/会当凌绝顶.png"
        alt
      />
      <div class="first-screen-btn">
        <a class="know-btn btn" href="#/navi/home">+ More</a>
      </div>
      <div class="first-screen-more" @click="MyClick">
        <div class="size">
          <a
            class="iconfont icon-xiangshang sa"
          ></a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Introduction",
  data() {
    return {
      vedioCanPlay: false,
      fixStyle: "",
      kk:
        "M78.848 12.644v3.133H61.736l-.576 2.014h16.76v1.828l-1.669 7.233H59.375V23.45h13.581l.522-2.259H56.594v-1.7l1.063-3.715h-3.845v-3.133h25.036zM41.42 13.843v1.934h10.507v3.401H41.42v7.674h-4.08v-7.674H26.891v-3.401H37.34v-1.934h4.08zM18.104.85c-.101 7.245-.24 11.578-1.329 14.927h8.26v3.401h-9.898c-1.58 2.383-4.039 4.58-7.89 7.674H.968l.791-.625c3.87-3.053 6.53-5.151 8.334-7.049H0v-3.401h12.509c1.397-3.018 1.505-7.325 1.609-14.927h3.987zm3.06 20.029l3.867 5.973h-4.81l-3.867-5.973h4.81zm26.895 0l3.867 5.973h-4.811l-3.867-5.973h4.811zm-12.492 0l-3.866 5.973H26.89l3.866-5.973h4.811zM31.374 0l3.771 1.7h15.391v3.958c-1.14.987-2.862 2.413-5.857 3.91a89.124 89.124 0 007.248 1.468v3.63c-5.362-.847-9.447-1.862-12.608-2.907-3.2 1.074-7.255 2.09-12.428 2.904v-3.628a90.857 90.857 0 007.106-1.425c-2.22-1.1-3.65-2.124-4.73-2.898-.165-.118-1.678-1.256-1.678-1.256L31.374 0zM2.314 8.125l8.869 1.226v3.797L2.315 11.92V8.125zM77.365 1.7v8.93H55.295V1.7h22.07zm-31.91 3.4h-12.12c1.39.874 3.292 1.886 6.1 2.896 2.814-1.01 4.692-2.023 6.02-2.895zm27.83 0H59.375V7.23h13.91V5.102zm-70.97-3.4l8.869 1.226v3.797L2.315 5.497V1.7z",
      muted: true,
      showBar: false,
    };
  },
  methods: {
    canplay() {
      this.vedioCanPlay = true;
    },
    MyClick() {
      this.$parent.$emit("_click");
    }
  },

  mounted: function () {
    window.onresize = () => {
      const windowWidth = document.body.clientWidth;
      const windowHeight = document.body.clientHeight;
      const windowAspectRatio = windowHeight / windowWidth;
      let videoWidth;
      let videoHeight;
      if (windowAspectRatio < 0.5625) {
        videoWidth = windowWidth;
        videoHeight = videoWidth * 0.5625;
        this.fixStyle = {
          height: windowWidth * 0.5625 + "px",
          width: windowWidth + "px",
          "margin-bottom": (windowHeight - videoHeight) / 2 + "px",
          "margin-left": "initial",
        };
      } else {
        videoHeight = windowHeight;
        videoWidth = videoHeight / 0.5625;
        this.fixStyle = {
          height: windowHeight + "px",
          width: windowHeight / 0.5625 + "px",
          "margin-left": (windowWidth - videoWidth) / 2 + "px",
          "margin-bottom": "initial",
        };
      }
    };
    window.onresize();
  },
};
</script>

<style lang="scss" scoped>
@import "../../assets/HomeResource/css/normalize.css";
@import "../../assets/HomeResource/css/font/iconfont.css";

.homepage-hero-module,
.video-container {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.video-container .poster img,
.video-container video {
    z-index: 0;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    object-fit: fill;
}
.video-container .filter {
  z-index: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}
.homepage-content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 2;

  .first-screen-logo {
    position: absolute;
    top: 60px;
    left: -webkit-calc(50% - 612px);
    left: -moz-calc(50% - 612px);
    left: calc(50% - 612px);
    width: 200px;
    color: #fff;
    font-size: 25px;
    font-weight: 500;
    font-family: "黑体";
  }
  .first-screen-slogan {
    width: 50%;
    min-width: 400px;
    position: absolute;
    left: 30%;
    top: 25%;
  }
  .first-screen-btn {
    position: absolute;
    top: 65%;
    left: 75%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    margin-top: 60px;
    min-width: 188px;
    a {
      text-decoration: none;
      color: #fff;
      font-size: 30px;
      font-family: "宋体";
    }
    .btn {
      display: inline-block;
      width: 160px;
      height: 40px;
      text-align: center;
      line-height: 36px;
      border-radius: 5px;
    }
    .know-btn {
      margin-right: 20px;
      border: 1px solid #fff;
      transition: all 0.5s ease;
    }
    a:hover {
      text-decoration: none;
      color: rgb(96, 97, 96);
      font-size: 30px;
      font-family: "隶书";
      font-weight: bolder;
    }
    .know-btn:hover {
      border: 1px solid #fff;
      background-color: #fff;
    }
  }
  .first-screen-more {
    position: absolute;
    left: 50%;
    bottom: 81px;
    color: #fff;
    font-size: 14px;
    line-height: 20px;
    transform: translateX(-50%);
    text-align: center;
    .txt {
      display: block;
      margin-bottom: 10px;
    }
    .size {
      /* // background-color: #f04142; */
      animation: next 1s ease infinite alternate;
      a {
        text-decoration: none;
      }

      a:hover {
        text-decoration: none;
      }
      a:link {
        color: rgb(255, 255, 255);
      }

      a:visited {
        color: rgb(250, 245, 245);
      }

      a:hover {
        color: rgb(105, 236, 225);
      }

      a:active {
        color: rgb(255, 255, 255);
      }
      .sa {
        font-size: 40px;
        font-weight: bolder;
      }
    }
    @keyframes next {
      from {
        transform: none;
      }
      to {
        transform: translateY(15px);
      }
    }
  }
  .first-screen-volume {
    position: absolute;
    bottom: 44px;
    right: 100px;
    cursor: pointer;
    height: 36px;
    width: 36px;
    .fs {
      font-size: 36px;
      color: #fff;
      opacity: 0.6;
    }
  }
}
</style>
